<!DOCTYPE html>
<html>
<head>
    <title>自定义私有订阅-新增</title>
    {% include 'system/common/header.html' %}
</head>
<body>
    <form class="layui-form" action="">
        <div class="mainBox">
            <div class="main-container">
                <div class="layui-form-item">
                    <label class="layui-form-label">订阅名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" placeholder="请输入订阅名称" 
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">订阅类型</label>
                    <div class="layui-input-block">
                        <select name="type" lay-verify="required">
                            <option value="txt">TXT</option>
                            <option value="m3u">M3U</option>
                            <option value="json">JSON</option>
                            <option value="genre">GENRE-TXT</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">选择分类</label>
                    <div class="layui-input-block">
                        {% for category in categories %}
                        <input type="checkbox" name="categories" value="{{ category.name }}" 
                               title="{{ category.name }}" lay-skin="primary">
                        {% endfor %}
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">订阅地址</label>
                    <div class="layui-input-block">
                        <div id="subscriptionUrl" style="padding: 10px; background-color: #f8f8f8; border: 1px solid #e6e6e6; margin-bottom: 5px; word-break: break-all; word-wrap: break-word;"></div>
                        <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="copyUrl">
                            <i class="layui-icon layui-icon-file"></i>复制地址
                        </button>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="number" name="sort" value="0" lay-verify="number" 
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="enable" value="1" lay-skin="switch" lay-text="启用|禁用" checked>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="remark" placeholder="请输入备注信息" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit lay-filter="rss-custom-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    保存
                </button>
                <button type="reset" class="pear-btn pear-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>
    {% include 'system/common/footer.html' %}

    <script>
        layui.use(['form', 'jquery'], function() {
            let form = layui.form;
            let $ = layui.jquery;
            
            // 生成订阅地址
            function generateSubscriptionUrl() {
                let name = $('input[name="name"]').val();
                let type = $('select[name="type"]').val();
                let categories = [];
                
                $('input[name="categories"]:checked').each(function() {
                    categories.push($(this).val());
                });

                if (name && categories.length > 0) {
                let baseUrl = window.location.origin;
                
                // 手动构建查询参数
                let queryParams = [
                    `name=${encodeURIComponent(name)}`,
                    `type=${encodeURIComponent(type)}`,
                    `categories=${encodeURIComponent(categories.join(','))}`  // 使用逗号连接分类
                ];
                
                // 生成完整URL
                let url = `${baseUrl}/iptvadmin/api/rss/cust?${queryParams.join('&')}`;
                $('#subscriptionUrl').text(url);
                
                // 调试输出
                //console.log('Categories:', categories);
                //console.log('Generated URL:', url);
            }
        }

            // 监听表单变化
            form.on('select', function() {
                generateSubscriptionUrl();
            });

            $('input[name="name"]').on('input', function() {
                generateSubscriptionUrl();
            });

            form.on('checkbox', function() {
                generateSubscriptionUrl();
            });
            // 初始化显示订阅地址
            generateSubscriptionUrl();
            // 复制订阅地址
            $('#copyUrl').on('click', function() {
                let url = $('#subscriptionUrl').text();
                if (!url) {
                    layer.msg('请先生成订阅地址', {icon: 2});
                    return;
                }

                // 创建临时输入框
                let tempInput = $('<input>');
                $('body').append(tempInput);
                tempInput.val(url).select();
                
                try {
                    // 尝试使用现代API
                    if (navigator.clipboard && window.isSecureContext) {
                        navigator.clipboard.writeText(url).then(function() {
                            layer.msg('复制成功', {icon: 1});
                        }).catch(function() {
                            // 如果API失败，回退到传统方法
                            document.execCommand('copy');
                            layer.msg('复制成功', {icon: 1});
                        });
                    } else {
                        // 使用传统方法
                        document.execCommand('copy');
                        layer.msg('复制成功', {icon: 1});
                    }
                } catch (err) {
                    layer.msg('复制失败，请手动复制', {icon: 2});
                } finally {
                    // 移除临时输入框
                    tempInput.remove();
                }
            });

            // 表单提交
            form.on('submit(rss-custom-save)', function(data) {
                let loading = layer.load();
                data.field.url = $('#subscriptionUrl').text();
                
                $.ajax({
                    url: '/iptvadmin/rss/rss_custom/save',
                    data: JSON.stringify(data.field),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'post',
                    success: function(result) {
                        layer.close(loading);
                        if (result.success) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function() {
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                                parent.layui.table.reload('rss-table');
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html>